<script setup lang="ts">
import { ref } from 'vue';
import { onMounted } from 'vue';
import { Chart } from '@antv/g2';
import  { TableColumnCtx } from 'element-plus'
import * as echarts from 'echarts';

// 定义数据类型
// 1.数据分析
// 当前访问总人数
const totalPeople = ref(10)
// 昨天访问人数
const yesterdayPeople = ref(20)
// 当前内容发布量
const contentPublish = ref(10)
// 昨天内容发布量
const yesterdayContentPublish = ref(5)
// 当前考试总量
const examTotal = ref(0)
// 昨天考试总量
const yesterdayExamTotal = ref(0)
// 当前答题总量
const answerTotal = ref(0)
// 昨天答题总量
const yesterdayAnswerTotal = ref(0)




interface User {
  rank: number;
  username: string;
  questions: number;
}

const formatter = (row: User, column: TableColumnCtx<User>) => {
  return row.questions.toLocaleString(); // 添加千位分隔符
};

const tableData: User[] = [
  { rank: 1, username: '用魔法打败魔法', questions: 1500 },
  { rank: 2, username: '王多余', questions: 2100 },
  { rank: 3, username: '请叫我小李', questions: 1800 },
  { rank: 4, username: 'Christopher', questions: 1743 },
  { rank: 5, username: '一朵追逐月亮的向...', questions: 1421 },
  { rank: 6, username: 'Christopher', questions: 1743 },
  { rank: 7, username: '橙皮', questions: 1421 },
  { rank: 7, username: '橙皮', questions: 1421 },
  { rank: 7, username: '橙皮', questions: 1421 },
  { rank: 7, username: '橙皮', questions: 1421 },
  { rank: 7, username: '橙皮', questions: 1421 },
  
];
// 准备数据
// 刷题比例
const proportionData = [
      { genre: '单选题', sold: 300 },
      { genre: '多选题', sold: 115 },
      { genre: '简答题', sold: 120 },
      { genre: '填空题', sold: 350 },
      { genre: '编程题', sold: 250 },
];
// 刷题曲线
const curveData = [
  { date: '2020-10-10', value: 3 },
  { date: '2020-10-11', value: 4 },
  { date: '2020-10-12', value: 3.5 },
  { date: '2020-10-13', value: 5 },
  { date: '2020-10-14', value: 4.9 },
  { date: '2020-10-15', value: 6 },
  { date: '2020-10-16', value: 7 },
  { date: '2020-10-17', value: 9 },
  { date: '2020-10-18', value: 13 },
];


// 刷题比例表函数
const initProportionChart = () => {
  const proportionDataChart = new Chart({
    container: 'proportionDataContainer',
    autoFit: true,
    height: 400,
  });

  proportionDataChart
    .interval()
    .data(proportionData)
    .encode('x', 'genre')
    .encode('y', 'sold')
    .encode('color', 'genre') // 按类别设置颜色
    .style('fillOpacity', 0.8) // 设置填充透明度
    .style('cursor', 'pointer') // 添加悬停效果
    .label({
      text: 'sold',
      style: {
        fill: '#000',
        fontSize: 12,
      },
      position: 'top', // 标签显示在柱状图顶部
    });

  // 配置图例
  proportionDataChart.legend({
    position: 'bottom', // 图例放在底部
    itemName: {
      style: {
        fill: '#666', // 图例文字颜色
        fontSize: 12, // 图例文字大小
      },
    },
  });

  // 配置 x 轴
  proportionDataChart.axis('x', {
    title: null, // 移除 x 轴名称
    label: {
      style: {
        fontSize: 12,
        fill: '#666',
      },
    },
    line: {
      style: {
        stroke: '#ccc',
      },
    },
  });

  // 配置 y 轴
  proportionDataChart.axis('y', {
    title: null, // 移除 y 轴名称
    label: {
      style: {
        fontSize: 12,
        fill: '#666',
      },
    },
    grid: {
      line: {
        style: {
          stroke: '#f0f0f0',
        },
      },
    },
  });

  proportionDataChart.render();
};


// 折线图刷题曲线
const initCurveChart = () => {
  const curveDataChart = new Chart({
    container: 'curveDataContainer',
    autoFit: true,
    height: 400,
  });

  curveDataChart
    .data(curveData)
    .encode('x', 'date')
    .encode('y', 'value')
    .scale('x', {
      range: [0, 1],
    })
    .scale('y', {
      nice: true,
    });

  curveDataChart
    .line()
    .encode('color', '#409EFF') // 设置折线颜色
    .style('lineWidth', 2) // 设置折线宽度
    .style('cursor', 'pointer') // 添加悬停效果
    .label({
      text: 'value',
      style: {
        fill: '#409EFF',
        fontSize: 12,
        dx: -10,
        dy: -12,
      },
    });

  curveDataChart
    .point()
    .encode('color', '#409EFF') // 设置点颜色
    .style('fill', '#fff') // 设置点填充颜色
    .style('stroke', '#409EFF') // 设置点边框颜色
    .style('lineWidth', 2); // 设置点边框宽度

  curveDataChart.axis('x', {
    title: null, // 移除 x 轴名称
    label: {
      style: {
        fontSize: 12,
        fill: '#666',
      },
    },
    line: {
      style: {
        stroke: '#ccc',
      },
    },
  });

  curveDataChart.axis('y', {
    title: null, // 移除 y 轴名称
    label: {
      style: {
        fontSize: 12,
        fill: '#666',
      },
    },
    grid: {
      line: {
        style: {
          stroke: '#f0f0f0',
        },
      },
    },
  });

  curveDataChart.render();
};

// 访问总人数折线图
const initTotalPeopleChart = () => {
  const totalPeopleDataChartDom = document.getElementById('totalPeopleDataContainer');
  const totalPeopleDataChart = echarts.init(totalPeopleDataChartDom);
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Wed', 'Fri', 'Sun'],
      axisTick: { show: false }, // 隐藏 x 轴刻度线
      axisLabel: { show: false }, // 隐藏 x 轴刻度标签
    },
    yAxis: {
      type: 'value',
      axisTick: { show: false }, // 隐藏 y 轴刻度线
      axisLabel: { show: false }, // 隐藏 y 轴刻度标签
      splitLine: { show: false }, // 隐藏 y 轴网格线
    },
    tooltip: {
      show: false, // 不显示提示框
    },
    grid: {
      left: 0, // 图表左边距
      right: 0, // 图表右边距
      top: 0, // 图表上边距
      bottom: 0, // 图表下边距
    },
    series: [
      {
        data: [150, 230, 130, 260],
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          color: '#409EFF', // 设置线条颜色
          width: 2, // 设置线条宽度
        },
      },
    ],
  };
  totalPeopleDataChart.setOption(option);
};

// 内容发布量柱状图
const initContentPublishChart = () => {
  const contentPublishDataChartDom = document.getElementById('contentPublishDataContainer');
  const contentPublishChart = echarts.init(contentPublishDataChartDom);
  const initialData = [100, 120, 200, 150, 80, 70, 110, 130, 20];
  const option = {
    xAxis: {
      type: 'category', // 使用类目轴
      data: ['Mon', 'Wed', 'Fri', 'Sun'], // x 轴数据
      axisTick: { show: false }, // 隐藏 x 轴刻度线
      axisLabel: { show: false }, // 隐藏 x 轴刻度标签
    },
    yAxis: {
      type: 'value',
      axisTick: { show: false }, // 隐藏 y 轴刻度线
      axisLabel: { show: false }, // 隐藏 y 轴刻度标签
      splitLine: { show: false }, // 隐藏 y 轴网格线
    },
    tooltip: {
      show: false, // 不显示提示框
    },
    grid: {
      left: 0, // 图表左边距
      right: 0, // 图表右边距
      top: 0, // 图表上边距
      bottom: 0, // 图表下边距
    },
    series: [
      {
        data: initialData,
        type: 'bar', // 柱形图
        barWidth: '60%', // 柱形图宽度
        itemStyle: {
          color: '#409EFF', // 柱形图颜色
        },
      },
    ],
  };
  contentPublishChart.setOption(option);
};

// 考试总量折线图
const initExamTotalChart = () => {
  const examTotalDataChartDom = document.getElementById('examTotalDataContainer');
  const examTotalChart = echarts.init(examTotalDataChartDom);
  const option = {
    xAxis: {
      type: 'category',
      data: ['Mon', 'Wed', 'Fri', 'Sun'],
      axisTick: { show: false }, // 隐藏 x 轴刻度线
      axisLabel: { show: false }, // 隐藏 x 轴刻度标签
    },
    yAxis: {
      type: 'value',
      axisTick: { show: false }, // 隐藏 y 轴刻度线
      axisLabel: { show: false }, // 隐藏 y 轴刻度标签
      splitLine: { show: false }, // 隐藏 y 轴网格线
    },
    tooltip: {
      show: false, // 不显示提示框
    },
    grid: {
      left: 0, // 图表左边距
      right: 0, // 图表右边距
      top: 0, // 图表上边距
      bottom: 0, // 图表下边距
    },
    series: [
      {
        data: [150, 230, 130, 260],
        type: 'line',
        symbol: 'none',
        showSymbol: false,
        lineStyle: {
          color: '#409EFF', // 设置线条颜色
          width: 2, // 设置线条宽度
        },
      },
    ],
  };
  examTotalChart.setOption(option);
};


// 答题总量饼图
const initAnswerTotalChart = () => {
  const answerTotalDataChartDom = document.getElementById('answerTotalDataContainer');
  const answerTotalChart = echarts.init(answerTotalDataChartDom);
  const option = {
    tooltip: {
      trigger: 'item',
    },
    series: [
      {
        name: '内容类型',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: 'center',
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold',
          },
        },
        labelLine: {
          show: false,
        },
        data: [
          { value: 1048, name: '判断题' },
          { value: 735, name: '选择题' },
          { value: 580, name: '编程题' },
          { value: 888, name: '填空题' },

        ],
      },
    ],
  };
  option && answerTotalChart.setOption(option);
};

onMounted(() => {
  initProportionChart();
  initCurveChart();
  initTotalPeopleChart();
  initContentPublishChart();
  initExamTotalChart();
  initAnswerTotalChart();
});


const value = ref('')
// 选择器
const options = [
  {
    value: 'Option1',
    label: 'Option1',
  },
  {
    value: 'Option2',
    label: 'Option2',
  },
  {
    value: 'Option3',
    label: 'Option3',
  },
  {
    value: 'Option4',
    label: 'Option4',
  },
  {
    value: 'Option5',
    label: 'Option5',
  },
]

</script>
<template>
       <div class = "total">
          <el-row :gutter="20">
            <el-col :span="24">
              <el-tag
                      type="primary"
                      style="font-size: 16px; letter-spacing: 2px; padding: 8px 12px; margin-top: 0px;margin-bottom: 10px;"
                    >
                      数据分析
                    </el-tag> 
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="6">
              <el-card class="custom-card">
                <div class="card-content">
                  <div class="card-left">
                    <h4 class="card-title">访问总人数</h4>
                    <p class="card-value">{{ totalPeople }}</p>
                    <p class="card-change">
                      <small>较昨天 {{ totalPeople - yesterdayPeople }}</small>
                    </p>
                  </div>
                  <div class="card-right">
                    <div id="totalPeopleDataContainer" style="width: 100%; height: 100px;"></div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="custom-card">
                <div class="card-content">
                  <div class="card-left">
                    <h4 class="card-title">内容发布量</h4>
                    <p class="card-value">{{ contentPublish }}</p>
                    <p class="card-change">
                      <small>较昨天 {{ contentPublish - yesterdayContentPublish}}</small>
                    </p>
                  </div>
                  <div class="card-right">
                    <div id="contentPublishDataContainer" style="width: 100%; height: 100px;"></div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="custom-card">
                <div class="card-content">
                  <div class="card-left">
                    <h4 class="card-title">考试总量</h4>
                    <p class="card-value">{{ examTotal }}</p>
                    <p class="card-change">
                      <small>较昨天 {{ examTotal - yesterdayExamTotal }}</small>
                    </p>
                  </div>
                  <div class="card-right"> 
                    <div id="examTotalDataContainer" style="width: 100%; height: 100px;"></div>
                  </div>
                </div>
              </el-card>
            </el-col>
            <el-col :span="6">
              <el-card class="custom-card">
                <div class="card-content">
                  <div class="card-left">
                    <h4 class="card-title">答题总量</h4>
                    <p class="card-value">{{ answerTotal }}</p>
                    <p class="card-change">
                      <small>较昨天 {{ answerTotal - yesterdayAnswerTotal }}</small>
                    </p>
                  </div>
                  <div class="card-right">
                    <div id="answerTotalDataContainer" style="width: 100%; height: 100px;"></div>
                  </div>
                </div>
              </el-card>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="16">
              <el-row :gutter="20">
                <el-col :span="24">
                  <el-tag
                      type="primary"
                      style="font-size: 16px; letter-spacing: 2px; padding: 8px 12px; margin-top: 20px;margin-bottom: 10px;"
                    >
                      刷题比例
                    </el-tag> 
                </el-col>
               </el-row>
              <div id="proportionDataContainer" style="width: 100%;"></div>
            </el-col>
            <el-col :span="8">
              <el-row :gutter="20">
                <el-col :span="18">
                    <el-tag
                      type="primary"
                      style="font-size: 16px; letter-spacing: 2px; padding: 8px 12px; margin-top: 20px;margin-bottom: 20px;"
                    >
                      刷题排名
                    </el-tag> 
                </el-col>
                <el-col :span="6">
                  <el-link
                  type="primary"
                  style="font-size: 14px; letter-spacing: 2px; padding: 8px 12px; margin-top: 10px;"
                  >
                  查看更多
                  </el-link>
                </el-col>
               </el-row>
               <el-table
                :data="tableData"
                :default-sort="{ prop: 'questions', order: 'descending' }"
                style="width: 100%"
                stripe 
                border 
                height="350" 
                :header-cell-style="{ background: '#f5f7fa', color: '#606266', fontWeight: 'bold',textAlign: 'center' }" 
                :cell-style="{ textAlign: 'center' }" 
              >
                <el-table-column prop="rank" label="Rank" width="100" />
                <el-table-column prop="username" label="Name" width="200" />
                <el-table-column prop="questions" label="Questions" sortable width="150" :formatter="formatter" />
            </el-table>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="10">
              <el-tag
                      type="primary"
                      style="font-size: 16px; letter-spacing: 2px; padding: 8px 12px; margin-top: 10px;"
                    >
                      刷题曲线
                    </el-tag> 
            </el-col>
            <el-col :span="14">
              <el-select 
                  v-model="value"
                  placeholder="Select"
                  size="large"
                  style="width: 240px;justify-content: flex-end;margin-right:10px;"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
              </el-select>
              <el-select 
                  v-model="value"
                  placeholder="Select"
                  size="large"
                  style="width: 240px;justify-content: flex-end;margin-right:10px;"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
              </el-select>
              <el-select 
                  v-model="value"
                  placeholder="Select"
                  size="large"
                  style="width: 240px;justify-content: flex-end;margin-right:10px;"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  />
              </el-select>
            </el-col>
          <el-col :span="24"><div id="curveDataContainer" style="width: 100%;"></div></el-col>
        </el-row>
       </div>
</template>

<style scoped lang="scss">
.custom-card {
  background-color: #ffffff;
  border-radius: 8px; // 添加圆角
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); // 添加阴影
  transition: all 0.3s ease; // 添加过渡效果

  &:hover {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); // 悬停时阴影加深
  }
}

.card-content {
  display: flex; /* 启用 flex 布局 */
  align-items: center; /* 垂直居中 */
  justify-content: space-between; /* 左右分栏 */
}

.card-left {
  flex: 1; /* 左侧占据剩余空间 */
  margin-right: 20px; /* 右侧留出间距 */
}

.card-right {
  width: 150px; /* 右侧固定宽度 */
}

.card-title {
  font-size: 16px;
  color: #606266;
  margin-bottom: 10px;
}

.card-value {
  font-size: 24px;
  color: #303133;
  font-weight: bold;
  margin-bottom: 10px;
}

.card-change small {
  font-size: 14px;
  color: #67C23A; /* 绿色表示增长，红色表示减少 */
}
/* 表格悬停效果 */
.el-table--enable-row-hover .el-table__body tr:hover > td {
  background-color: #f5f7fa !important;
}

/* 斑马纹效果 */
.el-table--striped .el-table__body tr.el-table__row--striped td {
  background-color: #fafafa;
}

/* 表格边框 */
.el-table--border {
  border: 1px solid #ebeef5;
}

/* 表头样式 */
.el-table__header th {
  background-color: #f5f7fa;
  color: #606266;
  font-weight: bold;
}

/* 单元格样式 */
.el-table__body td {
  text-align: center;
}
</style>
